/**
 * @Zhou Bo
 * 
 */
var canvas  = document.getElementById("demo");
var ctx = canvas.getContext("2d");
 ctx.beginPath();
 var x1 = 700;
 var y1 = 400;
 var r1 = 50;
 var x2 = 400;
 var y2 = 400;
 var r2 = 100;

 var grad = ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
 var grad2 = ctx.createLinearGradient(x1,y1,x2,y2);
 
 grad.addColorStop(0.0,"#f00");
// grad.addColorStop(0.2,"#0F0");
// grad.addColorStop(0.6,"#F00");
 grad.addColorStop(1.0,"#00F");
 ctx.fillStyle= grad;
 ctx.fillRect(0,0,800,1200);
 
 ctx.lineWidth = "5";
 ctx.strokeStyle = "#000";
 ctx.arc(x1,y1,r1,0,6.28);
 ctx.stroke();
 ctx.beginPath();
 ctx.arc(x2,y2,r2,0,6.28);
 ctx.stroke();
// 

 ctx.beginPath();
 
 ctx.bezierCurveTo(30,60,130,20,300,300);
 ctx.stroke();
 
 
// ctx.rec
 
 
 
